<template>
  <div class="header header-one" :class="fixed ? 'fixed-header' : ''">
    <marquee :text="text" @close="closeBox" v-if="showBox"></marquee>
    <div
      class="spice-container spice-header"
      :class="typeClass"
      @mousemove="pageMove"
      @mouseout="pageOut"
    >
      <nav class="spice-navbar">
        <div class="spice-navbar-left">
          <ul class="spice-navbar-ul">
            <li>
              <i class="svg-iconfont icon-svg-location"></i>配送至：中国大陆地区
            </li>
            <li>客户服务</li>
            <li><i class="svg-iconfont icon-svg-phone"></i>400.8210.582</li>
          </ul>
        </div>
        <div class="spice-navbar-logo">
          <a href="/zh">
            <img src="../../assets/img/logo.png" />
          </a>
        </div>
        <div class="spice-navbar-menu spice-navbar-menu-other">
          <ul
            class="spice-nav spice-nav-pills spice-nav-other spice-nav-other-login spice-header-mincart-length-0 spice-header-mincart-length-1"
          >
            <li
              class="spice-nav-btn-login e-header-login"
              @mousemove="loginMove"
              @mouseout="loginOut"
            >
              <a class="login-text">登录</a>
              <div class="spice-sub-menu fadeIn animated" v-show="show_login">
                <div class="spice-dropdown-menu-content">
                  <h3>拥有古驰账户您将获得以下权利：</h3>
                  <ul>
                    <li>保存您的心愿清单</li>
                    <li>个性化您的推荐内容</li>
                    <li>订单寄送追踪及退换货管理</li>
                  </ul>
                  <div class="spice-submenu-btn">
                    <router-link
                      to="/Login"
                      class="spice-btn spice-btn-golden spice-submenu-btn-login"
                      >登录</router-link
                    >
                    <router-link
                      to="/Login"
                      class="spice-btn spice-btn-golden spice-submenu-btn-login"
                      >注册</router-link
                    >
                  </div>
                </div>
              </div>
            </li>
          </ul>
          <div
            @mousemove="cardMove"
            @mouseout="cardOut"
            class="spice-header-shoppingcart e-header-shoppingcart spice-header-mincart-length-1"
          >
            <a href="javascript:;" class="icon-svg-shopping-bag">
              <span>购物袋</span>
              <span class="shopping-bag-product-count">{{
                $store.getters.getNum || " "
              }}</span>
            </a>
            <div class="spice-sub-menu fadeIn animated" v-show="show_card">
              <input type="hidden" name="shoppingCartLineCodes" />
              <div class="spice-dropdown-menu-content">
                <div class="spice-mini-list-standard-slot">
                  <div class="spice-mini-list-title"><h3>购物袋</h3></div>
                  <div class="spice-mini-list-tinyscrollbar"></div>
                  <div class="spice-mini-list-bottom">
                    <div class="spice-mini-list-total">
                      <p>
                        <label>商品总计</label>
                        <span>￥{{ $store.getters.getTotalPriceNo }}</span>
                      </p>
                    </div>
                    <div class="spice-mini-list-btn">
                      <router-link
                        to="/Card"
                        class="spice-btn spice-btn-golden spice-submenu-btn-login"
                        >前往结算</router-link
                      >
                      <router-link to="/Card" class="spice-btn spice-btn-black"
                        >查看购物袋</router-link
                      >
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="e-header-search">
            <a
              class="icon-header-search svg-iconfont search-icon e-search-open"
              style="display: block"
            ></a>
          </div>
        </div>
      </nav>
      <nav class="spice-navbar classgiy">
        <ul class="spice-nav-pills">
          <li
            class="spice-nav-menu"
            v-for="(oneType, i) in typeList"
            :key="i"
            @mousemove="menuMove(i)"
            @mouseleave="menuOut(i)"
          >
            <a>{{ oneType.oneTypeName }}<i class="spice-icon"></i></a>
            <div class="spice-sub-menu fadeIn animated" v-if="menu_Index == i">
              <div class="spice-header-menu-standard-slot">
                <div class="spice-header-menu-back e-header-menu-back">
                  <i class="spice-icon spice-icon-nav-left"></i
                  ><a class="backWords-link">{{ oneType.oneTypeName }}</a
                  ><a class="spice-nav-close"></a>
                </div>
                <div class="spice-header-menu-container-scroll">
                  <div
                    class="spice-header-menu-container spice-header-menu-story header-body"
                  >
                    <ul class="spice-navs">
                      <template v-for="(twoType, index) in oneType.twoTypeList">
                        <li class="menu-list" :key="index">
                          <div class="spice-sub-title">
                            <ul>
                              <li>
                                <router-link
                                  :to="
                                    '/List?twoId=' +
                                    twoType.twoTypeId +
                                    '&oneTypeName=' +
                                    oneType.oneTypeName +
                                    '&twoTypeName=' +
                                    twoType.twoTypeName
                                  "
                                  >{{ twoType.twoTypeName }}</router-link
                                >
                              </li>
                            </ul>
                          </div>
                        </li>
                      </template>
                    </ul>
                    <div class="header-nav-section-right-image">
                      <img
                        :src="oneType.oneTypeImg"
                        width="100%"
                        height="100%"
                      />
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </li>
        </ul>
      </nav>
    </div>
  </div>
</template>

<script>
import marquee from "../assembly/marquee";
export default {
  components: {
    marquee,
  },
  props: {
    fixed: {
      default: true,
    },
    type: {
      default: "one",
    },
  },
  data() {
    return {
      text:
        "作为我们对您的隐私权承诺的一部分，我们现已更新了《隐私政策》，更为透明地告知您我们如何使用和保留您的个人信息。您的相关隐私权利及我们与您的互动方式没有改变。",
      showBox: true,
      show_login: false,
      show_card: false,
      menu_Index: -1,
      page_out: false,
      show_menu: [],
      typeList: [],
    };
  },
  created() {
    this.$api.goodsType().then((res) => {
      if (res.code) {
        this.typeList = res.typeList;
      }
    });
  },
  methods: {
    closeBox() {
      this.showBox = false;
    },
    loginMove() {
      this.show_login = true;
    },
    loginOut() {
      this.show_login = false;
    },
    cardMove() {
      this.show_card = true;
    },
    cardOut() {
      this.show_card = false;
    },
    menuMove(i) {
      this.menu_Index = i;
    },
    menuOut() {
      this.menu_Index = -1;
    },
    pageMove() {
      this.page_out = true;
    },
    pageOut() {
      this.page_out = false;
    },
  },
  computed: {
    typeClass() {
      let className = "";
      if (this.type == "page") {
        if (!this.page_out) {
          className += "header-transparent";
        }
      }
      return className;
    },
  },
};
</script>

<style lang="scss" scoped>
.header-one {
  &.header {
    padding: 0px;
    .footer {
      padding: 0px;
    }
    .header-body {
      display: flex;
      align-items: center;
      justify-content: center;
      .header-nav-section-right-image {
        width: 50vw;
        img {
          width: 350px;
          height: 150px;
        }
      }
    }
    .spice-navs {
      width: 20vw;
      display: flex;
      flex-wrap: wrap;
      .menu-list {
        width: 25%;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0px;
      }
    }

    .spice-container.header-transparent {
      transition: all 0.2s ease-out;
      background: linear-gradient(180deg, #23201e 0, rgba(35, 32, 30, 0));
    }
    &.fixed-header {
      position: fixed;
      z-index: 999;
      left: 0;
      right: 0;
      top: 0;
    }
    .spice-container {
      width: 100%;
      position: fixed;
      height: 120px;
      top: 0;
      left: 0;
      top: 36px;
      background-color: #1b1b1b;
      z-index: 100;
      box-sizing: border-box;
      padding: 5px 100px;
      .spice-navbar {
        display: flex;
        align-items: center;
        height: 58px;
        justify-content: space-between;
        &.classgiy {
          justify-content: center;
          align-items: center;
          .spice-sub-menu {
            display: block;
            visibility: visible;
            opacity: 1;
            width: 100vw;
            left: 0;
          }
        }

        .spice-navbar-left {
          .spice-navbar-ul {
            display: flex;
            color: #e5dfd9;
            font-size: 12px;
            line-height: 12px;
            li {
              padding: 0 10px;
              font-family: FuturaLT-Book, GucciChinese;
              font-size: 12px;
              line-height: 12px;
              position: relative;
              color: #e5dfd9;
            }
          }
        }
        .spice-navbar-logo {
          font-size: 0;
          transition: height 0.2s ease-out, opacity 0.2s ease-out,
            padding 0.2s ease-out;
          text-align: center;
          img {
            display: inline-block;
            width: 160px;
            margin: 0 auto;
            max-width: 100%;
          }
        }
        .spice-navbar-menu {
          display: flex;
          align-items: center;
          & > ul,
          & > div {
            padding: 0 10px;
          }
          .spice-nav-btn-login .spice-sub-menu:before {
            left: 28% !important;
          }
          .spice-sub-menu {
            display: block;
            visibility: visible;
            opacity: 1;
          }

          .spice-sub-menu {
            width: 310px;
            padding: 21px 19px 18px;
            margin-left: -80px;
            background-color: #fff;
            border: 1px solid #bdbcbc;
            box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
            text-align: left;
            &:before {
              position: absolute;
              top: -6px;
              left: 50%;
              display: block;
              width: 0;
              height: 0;
              margin-left: -3px;
              content: "";
              border: 0 solid transparent;
              border-right-width: 6px;
              border-bottom-width: 6px;
              border-bottom-color: #fff;
              border-left-width: 6px;
            }
            .spice-dropdown-menu-content {
              h3 {
                color: #313131;
                padding-left: 1px;
                font-size: 12px;
                line-height: 12px;
                margin-bottom: 18px;
                font-family: FuturaLT-Heavy, GucciChinese;
              }
            }

            ul {
              padding-bottom: 6px;
              li {
                position: relative;
                width: 100%;
                padding-left: 10px;
                font-size: 11px;
                -webkit-transform-origin-x: 0;
                color: #4b4b4b;
                line-height: 12px;
                margin-bottom: 14px;
                font-family: FuturaLT-Book, GucciChinese;
                &:before {
                  display: block;
                  content: "";
                  position: absolute;
                  color: #999;
                  content: "\B7";
                  font-size: 38px;
                  left: -3px;
                  top: -4px;
                }
              }
            }
            .spice-submenu-btn-login {
              margin-bottom: 15px;
            }
          }
          .e-header-search .search-icon {
            font-size: 33px;
            display: block;
            width: 33px;
            cursor: pointer;
            color: #e5dfd9;
          }
        }
        .spice-header-shoppingcart .spice-sub-menu {
          width: 243px;
          left: 0;
          padding: 0px;
          background-color: #fff;
          box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
          .spice-mini-list-title {
            h3 {
              padding-top: 16px;
              text-align: center;
              font-size: 16px;
              color: #313131;
              padding-bottom: 7px;
              border-bottom: 1px solid #e7e7e7;
              font-family: FuturaLT-Book, GucciChinese;
              margin: 0px;
            }
          }
        }
      }
    }
    .spice-header .spice-nav-other-login {
      position: relative;
      top: 0px;
      right: 0px;
    }
    .spice-header-shoppingcart {
      position: relative;
      top: 0px;
      right: 0px;
    }
    .spice-nav-pills,
    .spice-nav-menu {
      height: 100%;
    }
    .login-text {
      line-height: 20px;
      width: 30px;
    }
    .spice-header-shoppingcart {
      line-height: 20px;
    }
    .spice-header-shoppingcart .spice-sub-menu {
      top: 30px;
    }
  }
}
</style>